<!--
 * @Autor: 黄旗
 * @Date: 2020-06-02 17:47:27
-->
<template>
<div class="i-table-no-border">
    <Form ref="form" :model="params" label-position="right">
        <Row :gutter="24" type="flex">
            <Col>
                <FormItem>
                   <DatePicker type="month" placeholder="请选择月份" :options="options" v-model="params.month_is" @on-change='submits'></DatePicker>
                </FormItem>
            </Col>
        </Row>
    </Form>
    <Table :columns="columns" :data="data" :loading="loading" border></Table>
</div>
</template>

<script>
    /* 这里导入其他文件：import 《组件名称》 from '《组件路径》 */
    import { perfectionlist } from '@/api/consumption';
    import dayjs from 'dayjs'
    export default {
        /* import引入的组件注入到components对象中使用 */
        components: {},
        data () {
            return {
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                data: [],
                columns: [
                    {
                        title: '诊室',
                        key: 'name'
                    },
                    {
                        title: '就诊患者数',
                        key: 'num'
                    },
                    {
                        title: '待完善',
                        key: 'not_perfect_num'
                    },
                    {
                        title: '完善率',
                        key: 'percent_num'
                    }
                ],
                loading: false,
                params: { month_is: '' }
            };
        },
        /* 监听属性 类似于data概念 */
        computed: {},
        watch: {},
        methods: {
            /* @函数功能: 请求数据 */
            askData () {
                this.loading = true
                let month_is = dayjs(this.params.month_is).format('YYYY-MM')
                perfectionlist({ month_is }).then(res => {
                    this.data = res
                    this.loading = false
                })
            },
            askDatas () {
                this.params.month_is = dayjs(new Date()).format('YYYY-MM')
                this.askData()
            },
            submits () {
                this.askData()
            }
        },
        created () {},
        /* 挂载完成能访问DOM元素 */
        mounted () {},
        /* 创建之前 */
        beforeCreate () {},
        /* 挂载之前 */
        beforeMount () {},
        /* 更新之前 */
        beforeUpdate () {},
        /* 更新之后 */
        updated () {},
        /* 销毁之前 */
        beforeDestroy () {},
        /* 销毁完成 */
        destroyed () {},
        /* 有keep-alive缓存即会触发 */
        activated () {}
    }
</script>

<style scoped>

</style>
